<template>
    <div class="baiduMap-container">
        <el-dialog
            :title="$t('location')"
            :visible="visibleBaiduMapSite"
            v-if="visibleBaiduMapSite"
            :close-on-click-modal="false"
            width="900px"
            @close="()=>{$store.commit('setVisibleBaiduMapSite',false)}">
            <div id="allmap" ref="map" :v-loading="loading">
                <baidu-map :style="{width:mapData.width,height:mapData.height}" class="map" :ak="baiduMapKey" :zoom="mapData.zoom" :center="mapData.center"
    @ready="handler" :scroll-wheel-zoom="true">
                    <!--缩放控件-->
                    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
                </baidu-map>
                <div class="search_wrap">
                    <el-input v-model="search_address" @keyup.enter.native="search">
                        <el-button slot="append" icon="el-icon-search" @click="search" @keyup.enter.native="search"></el-button>
                    </el-input>
                </div>
                <div class="res_address" v-show="point.lat!=null">
                    <span>{{res_address}}</span>
                    <el-button class="pull-right" type="primary" @click="savePoint()">{{$t('save')}}</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script scoped>
//百度地图
// import jsonp from 'jsonp'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmControl from 'vue-baidu-map/components/controls/Control'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
export default {
    name:'Header',
    components:{
        BaiduMap,
        BmControl,
        BmMarker,
        BmNavigation
    },
    props:{
        mapData:{
            type:Object,
            default:()=>{
                return {
                width:'100%',
                height:'500px',
                zoom:10,
                center:{
                    lng:102,
                    lat:23
                },
                mapObj:{},//地图对象
                markers:{},//地图上所有的标记
                }
            }
        },
        address:''
    },
    data(){
        return {
            loading:true,
            search_address:'',
            res_address:'',
            point:''
        }
    },
    watch:{

    },
    computed: {
        visibleBaiduMapSite(){
            return this.$store.state.sysStore.visibleBaiduMapSite
        }
    },
    mounted(){

    },
    methods:{
        handler({BMap,map}){
            // console.log(this.mapData.mapObj,'map')
            this.mapData.mapObj=map;
            this.mapData.width=this.$refs.map.clientWidth
            console.log(this.mapData)
            if(this.mapData.markers.lng!=null){
                var marker = new BMap.Marker(new BMap.Point(this.mapData.markers.lng, this.mapData.markers.lat));
                map.addOverlay(marker);
                this.point=this.mapData.markers
                this.res_address=this.address
            }else{
                this.geolocation()
            }

            let that=this
            var geoc = new BMap.Geocoder();
            map.addEventListener('click', function(e){
                //清除地图上所有的覆盖物
                map.clearOverlays();
                var pt = e.point;
                var marker = new BMap.Marker(new BMap.Point(pt.lng, pt.lat));
                map.addOverlay(marker);
                geoc.getLocation(pt, function(rs){
                    var addComp = rs.addressComponents;
                    // console.log(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber)
                    that.point=pt
                    that.res_address=addComp.province + " " + addComp.city + " " + addComp.district + " " + addComp.street + " " + addComp.streetNumber
                })
            })
        },
        geolocation(){
            let that=this
            var geolocation = new BMap.Geolocation();
	        geolocation.getCurrentPosition(function(r){
                that.loading=false
                // console.log(r,'定位');
                that.mapData.center = {lng: r.longitude, lat: r.latitude}
                that.autoLocationPoint = {lng: r.longitude, lat: r.latitude}
                that.initLocation = true
                // console.log('center:',that.mapData.center)
            },{enableHighAccuracy: true})
        },
        savePoint(){
            // console.log(this.point,this.res_address,'point address')
            this.$store.commit('setVisibleBaiduMapSite',false)
            this.$emit('getPoint',this.point,this.res_address)
            this.search_address=''
            this.res_address=''
            this.point=''
        },
        //查询
        search(){
            if(this.search_address!=''){
                this.getPointByAddress(this.search_address)
            }
        },
        getAddressByPoint(point){
            let baiduMapKey = 'inh0qPVz4a09PXGUYpe0SgCr2GDUiEEh'
            this.$jsonp('https://api.map.baidu.com/geocoder/v2/?output=json&pois=1&ak='+baiduMapKey+'&location='+point, {
                }).then((json) => {
              // 返回的jsonp数据不会放这里，而是在 window.jsonpCallback
            //   console.log(json)
              this.res_address=json.result.formatted_address
              return json
            }) 
        },
        getPointByAddress(address){
            let baiduMapKey = 'inh0qPVz4a09PXGUYpe0SgCr2GDUiEEh'
            this.$jsonp('https://api.map.baidu.com/geocoder/v2/?output=json&pois=1&ak='+baiduMapKey+'&address='+address, {
            }).then((data) => {
              // 返回的jsonp数据不会放这里，而是在 window.jsonpCallback
            //   console.log(data,'位置搜索结果')
            //   this.mapData.markers=[data.result.location]

                if(data.status===0){
                    //清除地图上所有的覆盖物
                    this.mapData.mapObj.clearOverlays();
                    let pt=data.result.location
                    var marker = new BMap.Marker(new BMap.Point(pt.lng, pt.lat));
                    this.mapData.mapObj.addOverlay(marker);
                    this.mapData.center=data.result.location
                    this.point=data.result.location
                    this.res_address=this.search_address
                }else{
                    this.$message.error('未查询到该地址');
                }
            }) 
        },

    }
}
</script>

<style lang="less">
@color_box_bg:#EFEFEF;
@color_title:#444;
@color_text:#636162;
@color_unit:#636162;
@color_light:#ff8920;
@border_bottom:1px dashed #D1D1D1;
@border_radius:3px;
@color_unit:#8a8a8a;
.baiduMap-container{
   .el-dialog__wrapper .el-dialog .el-dialog__body{
       padding: 0;
   }
   .map-control{

   }
   .search_wrap{
       .el-input-group {
            position: absolute;
            top: 80px;
            width: 400px;
            left: 50%;
            margin-left: -200px;
            /* opacity: 0.5; */
            background: rgba(255,255,255,.8);
            height: 40px;
            .el-input__inner{
                background: transparent;
                height: 40px;
                border-radius: 0;
            }
        }
   }
   .res_address{
        position: absolute;
        top:450px;
        left:300px;
        margin-left: -150px;
        padding: 10px;
        width: 530px;
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid #ccc;
        line-height: 30px;
   }
}
</style>